<style lang="less" scoped>
.invoice-btn {
  background: papayawhip;
  color: peru;
  padding: 0 4px;
  margin-left: 10px;
}
.layer {
  // 弹窗
  padding: 10px;
  font-size: 12px;
  line-height: 28px;
  border-top: 0.1px dashed #aaa;
  margin-top: 20px;

  &-item {
    display: flex;

    &__left {
      color: #999;
    }
    &__right {
      flex: 1;
      text-align: right;
      color: #333;
    }
  }
}
.loading {
  text-align: center;
  margin: 20px auto;
  height: auto;
}
</style>

<template>
  <div class="page">
    <div class="invoice-btn" @click="showInvoice">{{content}}</div>
    <!-- 发票 -->
    <van-dialog id="van-dialog" use-slot>
      <div>
        <div class="loading" v-if="loading">
          <van-loading type="spinner" />
        </div>
        <div class="layer" v-else>
          <div class="layer-item">
            <div class="layer-item__left">名称</div>
            <div class="layer-item__right" @click="copyText">{{item.companyname||'-'}}</div>
          </div>
          <div class="layer-item">
            <div class="layer-item__left">税号</div>
            <div class="layer-item__right" @click="copyText">{{item.no||'-'}}</div>
          </div>
          <div class="layer-item">
            <div class="layer-item__left">电话号码</div>
            <div class="layer-item__right" @click="makePhoneCall(item.tel)">{{item.tel||'-'}}</div>
          </div>
          <div class="layer-item">
            <div class="layer-item__left">单位地址</div>
            <div class="layer-item__right" @click="copyText">{{item.address||'-'}}</div>
          </div>
          <div class="layer-item">
            <div class="layer-item__left">开户行</div>
            <div class="layer-item__right" @click="copyText">{{item.bank||'-'}}</div>
          </div>
          <div class="layer-item">
            <div class="layer-item__left">银行账户</div>
            <div class="layer-item__right" @click="copyText">{{item.bankaccount||'-'}}</div>
          </div>
        </div>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import Dialog from '@/../static/vant/dialog/dialog';

export default {
  props: ['content', 'unique'],
  data() {
    return {
      item: {},
      loading: false
    };
  },
  methods: {
    showInvoice() {
      this.getInvoice();
      // 查看发票
      Dialog.alert({ title: '发票抬头' }).then(() => {
        // on close
      });
    },
    async getInvoice() {
      // 获取发票
      const unique = this.unique;
      const url = '/xcx/getInvoiceInfoByKeyno';
      const params = {
        unique: unique // 避免路由回退参数不更新
      };
      this.loading = true;
      const { status, message, result } = await this.$http.get(url, params);
      this.loading = false;
      if (status !== 200) {
        wx.showToast({
          title: message || '查询失败！',
          icon: 'none',
          duration: 2000
        });
        return;
      }

      this.item = result;
    },
    makePhoneCall(phone) {
      // 拨打电话
      if (!phone) {
        wx.showToast({
          title: '电话无效！',
          icon: 'none',
          mask: true
        });
        return;
      }
      wx.makePhoneCall({
        phoneNumber: phone || '' // 仅为示例，并非真实的电话号码
      });
    },
    copyText(e) {
      // 复制文本内容
      let text = null;
      try {
        text = e.mp._relatedInfo.anchorTargetText;
      } catch (error) {
        wx.showToast({
          title: '复制失败！',
          icon: 'none',
          mask: true
        });
      }

      wx.setClipboardData({
        data: text,
        success(res) {
          wx.getClipboardData({
            success(res) {
              wx.showToast({
                title: '复制成功'
              });
            }
          });
        }
      });
    }
  }
};
</script>
